<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-04 11:50:36
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-04 23:10:10
 * @FilePath: \vue3_admin_template\project\src\components\Category\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select
          v-model="useCategory.c1Id"
          placeholder="请选择一级分类"
          size="large"
          style="width: 240px"
          clearable
          :disabled="scene == 1 ? true : false"
          @change="changeC1"
        >
          <el-option
            v-for="item in useCategory.c1List"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="useCategory.c2Id"
          placeholder="请选择二级分类"
          size="large"
          style="width: 240px"
          clearable
          :disabled="scene == 1 ? true : false"
          @change="changeC2"
        >
          <el-option
            v-for="item in useCategory.c2List"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="useCategory.c3Id"
          placeholder="请选择三级分类"
          size="large"
          style="width: 240px"
          clearable
          :disabled="scene == 1 ? true : false"
          @change="changeC3"
        >
          <el-option
            v-for="item in useCategory.c3List"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'
//引入分类仓库相关数据
import useCategoryStore from '@/store/modules/category'
let useCategory = useCategoryStore()
const props = defineProps(['scene'])
let scene = ref(0)
watch(
  () => props.scene,
  (newvalue) => {
    scene.value = newvalue
  },
)
onMounted(() => {
  getC1()
})
//获取一级分类的方法
const getC1 = async () => {
  //通知仓库发请求获取一级分类数据
  useCategory.getC1()
}
//选择一级分类事件回调
const changeC1 = async () => {
  //需要将二级和三级分类数据清空
  useCategory.c2Id = ''
  useCategory.c3List = []
  useCategory.c3Id = ''
  //通知分类仓库获取二级分类数据
  useCategory.getC2()
}
const changeC2 = async () => {
  //需要将三级分类数据清空
  useCategory.c3Id = ''
  //通知仓库获取三级分类数
  useCategory.getC3()
}
const changeC3 = () => {
  //获取平台属性数据分类
}
</script>

<style lang="scss" scoped></style>
